<template>
    <table class="table_root">
        <tr>
            <th v-for="(row,ri) in data" ::key="ri" :colspan="row.lines.length">{{ row.name }}</th>
        </tr>
        <tr v-for="i in totalLines">
            <td :class="(i == (resultNodes[0] && resultNodes[0].x) && j ==  (resultNodes[0] && resultNodes[0].y)) ||
            (i == (resultNodes[1] && resultNodes[1].x) && j ==  (resultNodes[1] && resultNodes[1].y)) ||
            (i == (resultNodes[2] && resultNodes[2].x) && j ==  (resultNodes[2] && resultNodes[2].y))
                ? 'td_curr' : ''" 
                v-for="j in totalColumns" @click="onClicked(i,j)">{{ getYinNode(i,j)?.str }}</td>
        </tr>
        <tr>
            <td :colspan="totalColumns" class="result">
                {{ result }}
         
                    <div class="choose_btn" @click="onChoose">選擇</div>
                    <div class="clear_result" @click="result = ''">✕</div>
                    
        
                
            </td>
        </tr>
    </table>

</template>

<script setup lang="ts">
import zhuyin_table  from '../js/zhuyin_table'
import pinyin_table from '../js/pinyin_table'
import {ref, watch} from 'vue'

const props = defineProps({
    modelValue: String,
    type: Number
})

const emit = defineEmits(['choose'])

const data = ref<any[]>(props.type == 0 ? pinyin_table : zhuyin_table);
const result = ref('')

function onChoose() {
    emit('choose', result.value)
}

const totalLines = ref(0)
const totalColumns = ref(0)
data.value.forEach((g)=>{
    if (g.tone) {
        if (totalLines.value < g.lines.length) {
            totalLines.value = g.lines.length
        }
        ++totalColumns.value;
    } else {
        g.lines.forEach((li)=>{
            if (totalLines.value < li.length) {
                totalLines.value = li.length
            }
        })
        totalColumns.value += g.lines.length;
    }
})

interface YinNode {
    type: number; // 0-声母, 1-韵母, 2-声调
    str: string,
    x: number,
    y: number,
}

function getYinNode(i: number, j: number): YinNode | null {
    let jBegin = 0;
    const x = i - 1;
    const y = j - 1;
    for(let gi = 0; gi < data.value.length; ++gi) {
        const g = data.value[gi];
        if (jBegin + g.lines.length > y) {
            if (g.tone) {
                if (x >= g.lines.length) return null
                return {
                    type: gi,
                    str:  g.lines[x].tone + ' ' + g.lines[x].name,
                    x: i,
                    y: j
                };
            } else {
                let trueIndex = y - jBegin;
                return {
                    type: gi,
                    str:  g.lines[trueIndex][x],
                    x: i,
                    y: j
                };
            }
           
            
        }
        jBegin += g.lines.length;
    }


    return null;    
}

const resultNodes: YinNode[]  = [];
function onClicked(i:number, j:number) {
    const node = getYinNode(i, j)
    if (node && node.str) {
        resultNodes[node.type] = node;

        result.value = '';
        resultNodes.forEach((n)=>{
            if (n.type == 2) {
                result.value += n.str.substring(0, 1).trim();
            } else {
                result.value += n.str;
            }
        })
        reflectTone();
    }
}

function reflectTone() {
    const toneGroup = data.value.find((g)=> g.tone);
    const preV = result.value
    if (toneGroup.toneReflect && result.value.length) { // 拼音需要轉聲調
        const tone = Number(result.value[result.value.length - 1])
        if (tone) {
            for(let i = 0; i < toneGroup.priority.length; ++i) {
                const p = toneGroup.priority[i];
                const afterStr = result.value.replace(
                    new RegExp(p), 
                    toneGroup.toneReflect[p][tone - 1])
                if (afterStr != preV) {
                    result.value = afterStr.substring(0, afterStr.length - 1);
                    return;
                }
            }

            let toneWord = '';
            let jieIndex = -1;
            for(let i = 0; i < toneGroup.jie.length; ++i) {
                const jieYin = toneGroup.jie[i]
                const foundIndex = result.value.indexOf(jieYin);
                if (foundIndex >= 0) {
                    if (foundIndex > jieIndex) {
                        toneWord = jieYin;
                    }
                    jieIndex = foundIndex;
                }
            }
            if (toneWord) {
                const afterStr = result.value.replace(
                    new RegExp(toneWord), 
                    toneGroup.toneReflect[toneWord][tone - 1])
                if (afterStr != preV) {
                    result.value = afterStr.substring(0, afterStr.length - 1);
                    return;
                }
            }
                
        }
    }
}



</script>

<style lang="less" scoped>
.table_root {
    border: 1px solid #ddd;
    border-collapse: collapse;
    th, td {
        padding: 4px 8px;
        border: 1px solid #ddd;
        text-align: center;
    }
    td {
        cursor: pointer;

        &:hover {
            background-color: #ddd;
            color: black;
        }
    }

    .td_curr {
        background-color: #333;
        color: white;
    }
}

.result {
    background-color: rgba(0,0,0,0.8);
    color: white;
    height: 32px;
    &:hover {
        background-color: rgba(0,0,0,0.8) !important;
        color: white !important;
    }
    .clear_result {
        float: right;
        &:hover {
            color: red;
        }
    }

    .choose_btn {
        float: right;
        margin-left: 16px;
        cursor: pointer;
        &:hover {
            color: chocolate;
        }
    }
}
</style>